import '@antv/x6-vue-shape';
import { Graph, Shape } from '@antv/x6';
import card from './XsCard.vue';
let bool = false;
// 注册vue 节点
export default function register(_this) {
    if (bool) return;
    bool = true;
    Graph.registerNode('card', {
        inherit: 'vue-shape',
        component: {
            template: `<card />`,
            components: {
                card,
            },
        },
        ports: {
            groups: {
                top: {
                    position: 'top',
                    attrs: {
                        circle: {
                            r: 3,
                            magnet: true,
                            stroke: '#31d0c6',
                            strokeWidth: 2,
                            fill: '#fff',
                            style: {
                                visibility: 'hidden',
                            },
                        },
                    },
                },
                left: {
                    position: 'left',
                    attrs: {
                        circle: {
                            r: 3,
                            magnet: true,
                            stroke: '#31d0c6',
                            strokeWidth: 2,
                            fill: '#fff',
                            style: {
                                visibility: 'hidden',
                            },
                        },
                    },
                },
                bottom: {
                    position: 'bottom',
                    attrs: {
                        circle: {
                            r: 3,
                            magnet: true,
                            stroke: '#31d0c6',
                            strokeWidth: 2,
                            fill: '#fff',
                            style: {
                                visibility: 'hidden',
                            },
                        },
                    },
                },
                right: {
                    position: 'right',
                    attrs: {
                        circle: {
                            r: 3,
                            magnet: true,
                            stroke: '#31d0c6',
                            strokeWidth: 2,
                            fill: '#fff',
                            style: {
                                visibility: 'hidden',
                            },
                        },
                    },
                },
                abs: {
                    attrs: {
                        circle: {
                            r: 3,
                            magnet: true,
                            stroke: '#31d0c6',
                            strokeWidth: 2,
                            fill: '#fff',
                            style: {
                                visibility: 'hidden',
                            },
                        },
                        // text: {
                        //     fontSize: 12,
                        //     fill: '#888',
                        // },
                    },
                    // 文档：https://x6.antv.vision/zh/docs/api/registry/port-layout#absolute
                    position: {
                        name: 'absolute',
                    },
                },
            },
            items: [
                {
                    id: 'y_1',
                    group: 'top',
                },
                {
                    id: 'y_2',
                    group: 'bottom',
                },
                {
                    id: 'x_1',
                    group: 'left',
                },
                {
                    id: 'x_2',
                    group: 'right',
                },
            ],
        },
    });
    Shape.Edge.config({
        markup: [
            {
                tagName: 'path',
                selector: 'wrap',
                groupSelector: 'lines',
            },
            {
                tagName: 'path',
                selector: 'line1',
                groupSelector: 'lines',
            },
        ],
        attrs: {
            lines: {
                connection: true,
                // strokeDasharray: '10,20',
                strokeLinejoin: 'round',
                fill: 'none',
            },
            line1: {
                stroke: {
                    type: 'linearGradient',
                    stops: [
                        { offset: '0%', color: '#0061FF' },
                        // { offset: '50%', color: '#73d13d' },
                        { offset: '100%', color: '#00CEFF' },
                    ],
                },
                targetMarker: {
                    name: 'block',
                    width: 10,
                    height: 12,
                    offset: 0,
                    fill: '#00CEFF',
                },
                strokeWidth: 2,
            },
        },
        router: _this.edgeRouter,
        connector: {
            name: 'jumpover',
            args: {
                type: 'gap',
                radius: 10,
            },
        },
        // connector: 'rounded',
        tools: [
            // {
            //     name: 'button',
            //     args: {
            //         markup: [
            //             {
            //                 tagName: 'circle',
            //                 selector: 'button',
            //                 attrs: {
            //                     r: 12,
            //                     strokeWidth: 0,
            //                     fill: '#0061ff',
            //                     stroke: '#0061ff',
            //                     cursor: 'pointer',
            //                 },
            //             },
            //             {
            //                 tagName: 'text',
            //                 textContent: '+',
            //                 selector: 'icon',
            //                 attrs: {
            //                     fill: '#fff',
            //                     fontSize: 16,
            //                     fontWeight: 600,
            //                     textAnchor: 'middle',
            //                     pointerEvents: 'none',
            //                     y: '0.3em',
            //                 },
            //             },
            //         ],
            //         distance: 30,
            //         offset: { x: 0, y: 0 },
            //         onClick(e) {
            //             let { view } = e;
            //             const edge = view.cell;
            //             console.log(edge);
            //         },
            //     },
            // },
            // {
            //     name: 'vertices',
            // },
        ],
    });
    console.log('register successfully');
}
